<!--
 * @Author: huang liang miao 1127255342@qq.com
 * @Date: 2024-08-30 14:48:02
 * @LastEditors: 熊志伟 xiongzhiwei
 * @LastEditTime: 2024-12-19 08:43:59
 * @FilePath: \dcy-web\apps\admin\components\UserManagement\RoleList.vue
 * @Description: 角色管理-角色列表（增删改查）
-->
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import RoleInfoModal from './RoleInfoModal.vue'
import { roleListReq, deleteRoleReq } from "@/api/system/role/index"

const emits = defineEmits(['roleInfo'])
const delVisible = ref(false) // 删除
const visible = ref(false)
const visibleType = ref(1) // 弹窗类型 1、新增；2、编辑；3、查看
const activeIndex = ref(0)
const roleInfo = ref() // 当前角色信息
const tid = ref('') // 当前行id
const roleList = ref<any>([]) // 角色列表

const curIndex = ref(0)


// 查询列表
const { run: getRoleList } = useRequest(roleListReq, {
  // false 为自动执行
  manual: true,
  // 请求成功
  onSuccess: (data: any) => {
    roleList.value = data || []
    tid.value = data.length > 0 ? roleList.value[curIndex.value].id : ''
    roleInfo.value = roleList.value[curIndex.value] || ''
    emits('roleInfo', roleInfo.value)
  },
  // 请求失败
  onError: () => {
  },
})
getRoleList()

// 新增角色
function addRole() {
  visible.value = true
  roleInfo.value = ''
  visibleType.value = 1
}
// 编辑角色/查看角色
function editRole(i: number, item: any) {
  visible.value = true
  roleInfo.value = item
  visibleType.value = i
}
// 删除角色
const { run: deleteRole, loading: delLoading } = useRequest(deleteRoleReq, {
  // false 为自动执行
  manual: true,
  // 请求成功
  onSuccess: () => {
    ElMessage({
      message: '已删除',
      type: 'success',
    })
    if(activeIndex.value > 0) {
      activeIndex.value--
      curIndex.value = activeIndex.value
      tid.value = roleList.value[activeIndex.value].id
    }

    delVisible.value = false
    getRoleList()
  },
  // 请求失败
  onError: () => {
  },
})
function delRole(id: string) {
  tid.value = id
  delVisible.value = true
}
// 切换角色
function changeRole(i: number) {
  activeIndex.value = i
  curIndex.value = i
  tid.value = roleList.value[i].id
  emits('roleInfo', roleList.value[i])
}

// 关闭新增/编辑/查看弹窗
function closeModal(i: boolean) {
  if (i)
    getRoleList()

  visible.value = false
}

</script>

<template>
  <div class="role-list-content">
    <div class="role-title">
      <span class="role-type">角色类型</span>
      <span class="role-add" @click="addRole">
        <el-tooltip content="创建角色">
          <i class="iconfont icon-Property1jiaProperty2mianxing text-[24px]" />
        </el-tooltip>
      </span>
    </div>
    <div class="role-list">
      <el-scrollbar style="height:100%; overflow: auto;">
        <div v-for="(item, index) in roleList" :key="index" class="role-item" :class="{ active: index === activeIndex }" @click.stop="changeRole(index)">
          <span class="role-name">{{ item.name }}</span>
          <el-dropdown trigger="click">
            <span class="item-dot">···</span>
            <template #dropdown>
              <el-dropdown-menu  class="w-[110px]">
                <el-dropdown-item @click.stop="editRole(2, item)">
                  编辑
                </el-dropdown-item>
                <el-dropdown-item @click.stop="editRole(3, item)">
                  查看详情
                </el-dropdown-item>
                <el-dropdown-item @click.stop="delRole(item.id)">
                  <div class="w-[86px] text-[#F53F3F]">
                    删除
                  </div>
                </el-dropdown-item>
              </el-dropdown-menu >
            </template>
          </el-dropdown>
        </div>
      </el-scrollbar>
    </div>
  </div>
  <!-- 新增、编辑、查看 -->
  <RoleInfoModal v-if="visible" :visible="visible" :visible-type="visibleType" :role-info="roleInfo" @close-modal="closeModal" />
  
  <!-- 删除提示 -->
  <DelConfirmModal v-if="delVisible" :visible="delVisible" :loading="delLoading" text="删除后无法恢复，是否确认删除？" @cancel="delVisible = false" @ok="deleteRole({ id: tid })" />

</template>

<style lang="scss" scoped>
@import "@/assets/styles/variables.module.scss";
.role-list-content{
  --at-apply: w-[240px] h-full;
  border-right: 1px solid #F2F3F5;
  .role-title{
    --at-apply: flex justify-between py-[16px] mx-[16px] leading-[21px] border-b border-[#F2F3F5];
    .role-type{
      --at-apply: font-600 text-[#1D2129] text-[16px];
    }
    .role-add{
      --at-apply: text-[$--color-primary] cursor-pointer;
    }
  }
  .role-list{
    --at-apply: w-full px-[12px] my-[12px];
    height: calc(100% - 80px);
    :deep(.arco-scrollbar){
      --at-apply: pr-[16px];
      height: calc(100% - 32px);
    }
    .role-item{
      --at-apply: flex justify-between w-full text-[#4E5969] pl-[20px] py-[8px] pr-[12px] leading-[24px] rounded-[4px] cursor-pointer;
      &:hover{
        --at-apply: bg-[#F7F8FA];
      }
      .role-name{
        --at-apply: inline-block max-w-[140px] truncate;
      }
      .item-dot{
        --at-apply: leading-[24px] font-600;
      }
    }
    .active{
      --at-apply: bg-[#E8F3FF] text-[$--color-primary] font-700;
      &:hover{
        --at-apply: bg-[#E8F3FF];
      }
      .item-dot{
        --at-apply: text-[$--color-primary];
      }
    }
  }
}
</style>
